<!DOCTYPE html>
<html lang="en">
<!--  基于  课程：黑马程序员  《4个小时带你快速入门vue》
            地址：https://www.bilibili.com/video/BV12J411m7MG
        自己归纳的进阶知识
        -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue进阶</title>
</head>

<body>

    <div id="app">
        <component-a></component-a>
        <component-b></component-b>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="./js/vuev2.7.14.js"></script>

    <script>
        //定义组件对象A，通过js对象来定义组件
        let componentA = {
            //在组件中，data 是函数，将数据对象返回
            //模版
            data() { return { message: " 张三" } },
            template: `<h5>我是局部组件1模版{{message}}</h5>`
        }
        //定义组件对象B，通过js对象来定义组件
        let componentB = {
            //在组件中，data 是函数，将数据对象返回
            data() { return { message: " 李四" } },
            //模版
            template: `<p>我是局部组件2模版{{message}}</p>`
        }

        let app = new Vue({
            el: '#app',
            data: {
            },
            // 组件中心（注册局部组件）
            components: {
                /** 
                 * 标签名：组件名
                 * component-a：你要在视图层调用时使用的名称（标签名）
                 * ComponentA：局部注册组件名称（关联组件对象）
                */
                "component-a": componentA,
                "component-b": componentB
            }
        })
    </script>


</body>


</html>